<template>
  <div class="hotels">
    <div class="allHotel">
        <div v-if="transmitHotels.data">
            <div class="transmitHotels"
            v-for="(item,index) in transmitHotels.data.data"
            :key="index">
                <div class="hotelItem">
                    <div class="hotelItemLeft">
                        <div class="hotelImage">
                            <img 
                            :src="item.photos"/>
                        </div>
                    </div>
                    <div class="hotelItemCenter">
                        <!-- 酒店名称 -->
                        <h2 class="hotelTitle" 
                        :title="item.name">
                            <nuxt-link :to="`/hotel/details?hotelId=${item.id}`">
                                {{ item.name }}
                            </nuxt-link>
                        </h2>
                        <!-- 酒店拼音 -->
                        <h4 class="pinyin">
                            {{ item.alias }}
                        </h4>
                        <!-- 酒店评分以及星级 -->
                        <div class="pingjia">
                            <el-rate
                            v-model="item.stars"
                            disabled
                            show-score
                            text-color="#ff9900">
                            </el-rate>
                            <div class="detail">
                                <p class="pingluns">
                                    {{ Math.floor(Math.random() * 100) +1 }}条评论
                                </p>
                                <p class="youjis">
                                    {{ Math.floor(Math.random() * 100) +1 }}篇游记
                                </p>
                            </div>
                        </div>
                        <!-- 酒店位置 -->
                        <div class="hotelLocation">
                            <span class="el-icon-location"></span>
                            {{ item.address }}
                        </div>
                    </div>
                    <div class="hoterItemRight">
                        <div class="otherBrand">
                            <div 
                            class="brandItem"
                            v-for="(ele,key) in item.products"
                            :key="key">
                                <p class="brandName">
                                    {{ ele.name }}
                                </p>
                                <p class="brandPrice">
                                    ￥{{ ele.price }}起
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="showTotal">
        <div class="block">
            <el-pagination
            :page-size="paging.pageSize"
            :pager-count="5"
            layout="total, prev, pager, next"
            @current-change="handleCurrentChange"
            :total="paging.total">
            </el-pagination>
        </div>
    </div>
    <div 
    v-else
    class="noHotels">
        <p>该地区暂无酒店信息，请搜索其他地区的吧 =。=</p>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        transmitHotels: {
            type: Object,
            default: {}
        }
    },
    data:function(){
        return{
            paging: {
                pageSize: 10,
                total: 0,
            },
            value: 3.7,
            nextStart: 0,
            showTotal: true
        } 
    },
    methods:{
        handleCurrentChange(item){
            this.$emit('nestStart',{
                pageIndex: item - 1,
                pageSize: this.paging.pageSize
            });
        }
    },
    mounted(){
        this.cityData = this.$store.state.hotel.cityData
    },
    watch:{
        'transmitHotels'(){
            // this.transmitHotels.data.data.forEach(ele => {
            //     let {latitude,longitude} = ele.location;
            //     console.log(longitude,latitude);
            // })
            this.paging.total = this.transmitHotels.data.total;
            this.nextStart = this.transmitHotels.data.nextStart;
            this.showTotal = this.paging.total ? true : false
        },
        $route(){
            console.log(1);
        }
    }
}
</script>

<style scoped lang="less">
    .hotels{
        margin-top: 20px;
        width: 100%;
        .allHotel{
            .transmitHotels{
                width: 100%;
                padding: 25px 0;
                border-bottom: 1px solid #eee;
                position: relative;
                .hotelItem{
                    height: 200px;
                    width: 100%;
                    display: flex;
                    justify-content: space-evenly;
                    box-shadow: 4px 6px 7px 0px rgba(0, 0, 0, 0.1);
                    padding: 10px;
                    .hotelItemLeft{
                        flex: 0 0 35%;
                        height: 100%;
                        .hotelImage{
                            width: 100%;
                            height: 100%;
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                border-radius: 5px;
                            }
                        }
                    }
                    .hotelItemCenter{
                        flex:  0 0 40%;
                        .hotelTitle{
                            font-weight: 800;
                            margin-bottom: 10px;
                            cursor: pointer;
                            color: blueviolet;
                        }
                        .hotelTitle:hover{
                            text-decoration: underline;
                            color: orange;
                        }
                        .pinyin{
                            font-weight: 400;
                            color: gray;
                            margin-bottom: 5px;
                        }
                        .pingjia{
                            display: flex;
                            margin-bottom: 10px;
                            .detail{
                                display: flex;
                                justify-content: space-evenly;
                                flex: 0 0 50%;
                            }
                        }
                        .hotelLocation{
                            margin-bottom: 5px;
                            color: gray;
                        }
                    }
                    .hoterItemRight{
                        flex:  0 0 20%;
                        margin-top: 30px;
                        .otherBrand{
                            width: 100%;
                            .brandItem{
                                display: flex;
                                justify-content: space-around;
                                height: 40px;
                                line-height: 40px;
                                transition: all .4s;
                                .brandName{
                                    font-size: 16px;
                                    font-weight: 800;
                                    color: rgb(87, 77, 77);
                                    flex: 0 0 50%;
                                }
                                .brandPrice{
                                    color: orange;
                                    font-size: 17px;
                                    flex: 0 0 50%;
                                    text-align: right;
                                }
                            }
                            .brandItem:hover{
                                background-color: rgb(223, 225, 226);
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
        .noHotels{
            text-align: center;
            p{
                font-size: 20px;
                font-weight: 100;
                margin-top: 20px;
                font-style: italic;
            }
        }
    }
</style>